<template>
	<view >
		
		<view class="padding">
			
		<view class="padding bg-white login-box" style="">
		<!-- 页头logo -->
		<view class="login-logo-bar">
			<view class="flex padding-top-xl justify-center align-center">
			<image  class="login-logo-img" src="@/static/images/logo.png"></image>
			</view>
		</view>
		
		<view class="padding" style="margin-top:30px;">
			<!-- 登录框 -->
			<view class="radius">
				<view class="cu-form-group">
					<view class="title">
						<text class="cuIcon-mobilefill"></text>
					</view>
					<input v-model="mobile" placeholder="请输入手机号码"  />
				</view>
				
				<view class="cu-form-group" v-show="login_type==1" style="border-bottom: 1px solid #eee;">
					<view class="title">
						<text class="cuIcon-lock"></text>
						</view>
					<input type="password" v-model="password" placeholder="请输入密码"  />
					
				</view>
				
				<view class="cu-form-group" v-show="login_type==2" style="border-bottom: 1px solid #eee;">
					<view class="title">
						<text class="cuIcon-lock"></text>
						</view>
					<input type="digit" maxlength="6" v-model="vcode" placeholder="请输入验证码"  />
					<button type="button"   class="cu-btn cu-btn-sm round xc-c-000" :disabled="checktime>0"  @tap="sendSmsCode">{{checktime == 0?'获取验证码' : checktime+'秒重新获取'}}</button>
				</view>
			</view>
			
			<view class="text-blue margin-top">
				<text v-show="login_type==2" @tap="login_type=1">使用密码登录</text>
				<text v-show="login_type==1" @tap="login_type=2">使用验证码登录</text>
			</view>
			<!-- 确认提交 -->
			<view class="margin-top-xl flex  flex-direction">
				<button class="cu-btn lg bg-gradual-green round" @tap="subForm" >确认登录</button>
			</view>
		<!-- 	<view class="margin-top-xl flex  flex-direction">
				<button class="cu-btn lg bg-blue round" @tap="testapi" >测试接口</button>
			</view> -->
			
			<!-- 第三方登录 -->
			<view style="margin-top: 100rpx;" class="login-bot-title">
				<text class="title">快捷登录</text></view> 
			<view  class="flex padding-top justify-around third-login-bar">
				<!-- #ifdef H5 -->

				<!-- 微信公众号登录 -->
				<text class="text-white bg-green round third-login-item" >
				<text class="cuIcon-weixin text-white"  @tap="wxLogin()"  ></text>
				</text>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->

				<!-- 微信APP登录 -->
				<text class="text-white bg-green round third-login-item" >
				<text class="cuIcon-weixin text-white"  @tap="thirdLogin('weixin')"  ></text>
				</text>
				<!-- 微信APP登录
				<text class="text-white bg-red round third-login-item" >
				<text class="cuIcon-weibo text-white"  @tap="thirdLogin('weibo')"  ></text>
				</text>
				-->
				<!-- #endif -->
			</view>
					
		
		</view></view>
		</view>

<view> {{login_data}}</view>

	</view>
</template>

<script>
	
	// import config from "../../config.js"
	// import util from "../../common/util.js"
	// import API_Login from '../../api/login.js'
	// import API_Sms from '../../api/sms.js'
	// import { http } from '../../common/luch-request/http.js'
	// import wxJsSdk from '../../common/jwx.js'
	// import {
	//   setTokenStorage,
	//   getTokenStorage,
	//   configHandle
	// } from '../../common/luch-request/tool.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				login_type:1, //1，密码登录，2验证码登录
				mobile:"", //用户名
				vcode:"", //验证码
				password:"",//密码
				remember:false,
				checktime:0,
				login_data:"",
				templateAll:`
				<template>
					<view >
						
						<view class="padding">
							
						<view class="padding bg-white login-box" style="">
						<!-- 页头logo -->
						<view class="login-logo-bar">
							<view class="flex padding-top-xl justify-center align-center">
							<image  class="login-logo-img" src="@/static/images/logo.png"></image>
							</view>
						</view>
						
						<view class="padding" style="margin-top:30px;">
							<!-- 登录框 -->
							<view class="radius">
								<view class="cu-form-group">
									<view class="title">
										<text class="cuIcon-mobilefill"></text>
									</view>
									<input v-model="mobile" placeholder="请输入手机号码"  />
								</view>
								
								<view class="cu-form-group" v-show="login_type==1" style="border-bottom: 1px solid #eee;">
									<view class="title">
										<text class="cuIcon-lock"></text>
										</view>
									<input type="password" v-model="password" placeholder="请输入密码"  />
									
								</view>
								
								<view class="cu-form-group" v-show="login_type==2" style="border-bottom: 1px solid #eee;">
									<view class="title">
										<text class="cuIcon-lock"></text>
										</view>
									<input type="digit" maxlength="6" v-model="vcode" placeholder="请输入验证码"  />
									<button type="button"   class="cu-btn cu-btn-sm round xc-c-000" :disabled="checktime>0"  @tap="sendSmsCode">{{checktime == 0?'获取验证码' : checktime+'秒重新获取'}}</button>
								</view>
							</view>
							
							<view class="text-blue margin-top">
								<text v-show="login_type==2" @tap="login_type=1">使用密码登录</text>
								<text v-show="login_type==1" @tap="login_type=2">使用验证码登录</text>
							</view>
							<!-- 确认提交 -->
							<view class="margin-top-xl flex  flex-direction">
								<button class="cu-btn lg bg-gradual-green round" @tap="subForm" >确认登录</button>
							</view>
						<!-- 	<view class="margin-top-xl flex  flex-direction">
								<button class="cu-btn lg bg-blue round" @tap="testapi" >测试接口</button>
							</view> -->
							
							<!-- 第三方登录 -->
							<view style="margin-top: 100rpx;" class="login-bot-title">
								<text class="title">快捷登录</text></view> 
							<view  class="flex padding-top justify-around third-login-bar">
								<!-- #ifdef H5 -->
				
								<!-- 微信公众号登录 -->
								<text class="text-white bg-green round third-login-item" >
								<text class="cuIcon-weixin text-white"  @tap="wxLogin()"  ></text>
								</text>
								<!-- #endif -->
								<!-- #ifdef APP-PLUS -->
				
								<!-- 微信APP登录 -->
								<text class="text-white bg-green round third-login-item" >
								<text class="cuIcon-weixin text-white"  @tap="thirdLogin('weixin')"  ></text>
								</text>
								<!-- 微信APP登录
								<text class="text-white bg-red round third-login-item" >
								<text class="cuIcon-weibo text-white"  @tap="thirdLogin('weibo')"  ></text>
								</text>
								-->
								<!-- #endif -->
							</view>
									
						
						</view></view>
						</view>
				
				<view> {{login_data}}</view>
				
					</view>
				</template>
				
				<script>
					
					// import config from "../../config.js"
					// import util from "../../common/util.js"
					// import API_Login from '../../api/login.js'
					// import API_Sms from '../../api/sms.js'
					// import { http } from '../../common/luch-request/http.js'
					// import wxJsSdk from '../../common/jwx.js'
					// import {
					//   setTokenStorage,
					//   getTokenStorage,
					//   configHandle
					// } from '../../common/luch-request/tool.js'
					import {
						mapState,
						mapMutations
					} from 'vuex'
					
					export default {
						data() {
							return {
								login_type:1, //1，密码登录，2验证码登录
								mobile:"", //用户名
								vcode:"", //验证码
								password:"",//密码
								remember:false,
								checktime:0,
								login_data:"",
							}
						},
						onLoad() {
							
							let rem_mobile = uni.getStorageSync("rem_mobile");
							if (rem_mobile){
								this.remember = true;
								this.mobile = rem_mobile;
							}
						},
						methods: {
							...mapMutations(["login"]),
							//发送验证
							sendSmsCode(){
								let that = this;
								if(this.checktime>0){return;}
								if(this.mobile == ""){
									this.$api.msg("请输入手机号码");
									return;
								}
								
								if(!util.isMobile(this.mobile)){
									this.$api.msg("请输入正确格式手机号码");
									return;
								}
					
					
								API_Sms.sendsms({mobile: that.mobile}).then(res=>{
									console.log("发送短信返回",res);
									if (res.data.error_code ==0) {
										that.$api.msg('已发送，请注意及时输入')
										// 发送成功，开启倒计时
										that.checktime = config.smsResetSec;
										let timer = setInterval(()=>{
											that.checktime--;
											if(that.checktime < 1){
												clearInterval(timer);
												that.checktime=0;
											}
										},1000)
									}else{
										that.$api.msg(res.data.msg);
									}
								})
							},
							//记住密码
							changRemeber(e){
								console.log(e.target.value);
								if (e.target.value.includes('1')){
									this.remember = true;
								}else{
									this.remember = false;
								}
							},
							navReg(){
								uni.navigateTo({
									url: 'reg'
								});
							},
							subForm(){
								let that = this;
								
								if (that.mobile===""){
									that.$api.msg("请输入手机号码");
									return;
								}
								if(!util.isMobile(that.mobile)){
									that.$api.msg("请输入正确格式的手机号码");
									return;
								}
								//默认密码登录
								if (that.login_type ==2){
									if (that.vcode===""){
										that.$api.msg("请输入验证码");
										return;
									}
								}else{
									if (that.password===""){
										that.$api.msg("请输入密码");
										return;
									}
									
								}
				
								
								//确认登录成功
								if (that.remember){
									uni.setStorageSync("rem_mobile", that.mobile);
								}
								
								let url = "/v1/login_pas";
								let data_json = {
									account : that.mobile,
									password : that.password,
								}
								//默认密码登录
								if (that.login_type == 2){
									url = "/v1/login_mobile";
									data_json = {
										mobile : that.mobile,
										scode : that.vcode,
									}
									API_Login.loginByMobile(data_json).then(res=>{
										that.loginCallBack(res);
									})
								}else{
									API_Login.login(data_json).then(res=>{
										that.loginCallBack(res);
									})
								}
							},
							//手机登录之后
							loginCallBack(res){
								let that = this;
								console.log("手机登录返回值",res);
								if (res.data.error_code==0){
									that.$api.msg('登录成功');
									//console.log("token获取",res.data.token);
									//记住登录
									uni.setStorageSync("rem_mobile", that.mobile);
									//设置token
									uni.setStorageSync("token", {access_token:res.data.data.token});
									
									let login_json= {
										account:that.mobile,
										hasLogin:true
									}
									
									
									//设置token
									http.setConfig((config) => { /* 设置全局配置 */
									  return configHandle(config);
									})
									
									that.login(login_json);
									setTimeout(()=>{uni.navigateBack();},500)
								}else{
									that.$api.msg(res.data.msg);
								}
							},
							//微信公众号登录
							wxLogin(){
								wxJsSdk.wxAuthorize((data)=>{
									this.login_data = data;
									console.log("输出登录后", this.login_data);
								});
							},
						
							//微信APP登录
							thirdLogin(loginType="weixin"){
								let that = this;
								
								
								uni.getProvider({
									service:"oauth",
									success(resapp){
										console.log(resapp);
										if (resapp.provider.includes(loginType)){
											uni.showLoading({
												title:"登录中..."
											})
											uni.login({
											  provider: loginType,
											  success: function (loginRes) {
												//console.log("授权信息", loginRes.authResult);
												
												//登录url
												let url = "/v1/login_app";
													
												//提交数据
												let data_json= {
													openid:loginRes.authResult.openid,
													access_token:loginRes.authResult.access_token
												}
													
												that.$api.AJAX({
													method:"POST",
													data: data_json,
													url:config.baseUrl + url,
													success(res){
														console.log("返回值",res);
														if (res.error_code==60001){
															uni.redirectTo({
																url:"../ucenter/mobile_cert"
															});
														}
														else{
				
															//设置token
															uni.setStorageSync("token",{access_token:res.data.token});
															let login_json= {
																account:that.mobile,
																hasLogin:true
															}
															
															that.login(login_json);
															
															//设置token
															http.setConfig((config) => { /* 设置全局配置 */
															  return configHandle(config);
															})
															
															uni.hideLoading();
															
															setTimeout(()=>{
																uni.navigateBack();
															},500)
														
														}
													}
												})
				
											  },
											//失败登录
											fail(e){
												uni.hideLoading();
											}
											});
				
										}else{
											that.$api.msg("暂时没有开通")
										}
									}
								})
				
							}
						}
					}
				</ script>
				
				<style scope>
					.cu-form-group{ padding: 0;}
					.cu-form-group .title {
						min-width: calc(1em + 28rpx);
					}
					.login-box{margin-top: 230rpx; border-radius: 36rpx;}
					.login-logo-bar{ margin-top: -160rpx;}
					.login-logo-img {  width: 160rpx; height: 160rpx; border-radius: 40rpx; }
					page{ background: url(https://shop.io.mi-img.com/app/shop/img?id=shop_dfa89d9b977aa2f32346a1e2e3ecb838.png&w=750&h=1334);
				    background-size: 100% auto;
				    background-repeat: no-repeat;}
					.third-login-bar{}
					.third-login-item{ padding: 5px; width: 60rpx; height: 60rpx;}
					.third-login-item text{ font-size: 60rpx; margin-top:-4rpx; display: inline-block;}
					.login-bot-title{ position: relative; text-align: center;}
					.login-bot-title .title{ display: inline-block; line-height: 28rpx;  font-size: 28rpx; color:#999; background-color: #fff; position: relative;  z-index: 3; padding: 0 20rpx;  }
					.login-bot-title::after{ content: ""; width: 70%; height: 2rpx; transform: scaleY(.5); background-color: #ccc; position: absolute; left:15%; bottom: 14rpx;}
				</style>
				
				
				`
			}
		},
		onLoad() {
			
			let rem_mobile = uni.getStorageSync("rem_mobile");
			if (rem_mobile){
				this.remember = true;
				this.mobile = rem_mobile;
			}
		},
		methods: {
			...mapMutations(["login"]),
			//发送验证
			sendSmsCode(){
				let that = this;
				if(this.checktime>0){return;}
				if(this.mobile == ""){
					this.$api.msg("请输入手机号码");
					return;
				}
				
				if(!util.isMobile(this.mobile)){
					this.$api.msg("请输入正确格式手机号码");
					return;
				}
	
	
				API_Sms.sendsms({mobile: that.mobile}).then(res=>{
					console.log("发送短信返回",res);
					if (res.data.error_code ==0) {
						that.$api.msg('已发送，请注意及时输入')
						// 发送成功，开启倒计时
						that.checktime = config.smsResetSec;
						let timer = setInterval(()=>{
							that.checktime--;
							if(that.checktime < 1){
								clearInterval(timer);
								that.checktime=0;
							}
						},1000)
					}else{
						that.$api.msg(res.data.msg);
					}
				})
			},
			//记住密码
			changRemeber(e){
				console.log(e.target.value);
				if (e.target.value.includes('1')){
					this.remember = true;
				}else{
					this.remember = false;
				}
			},
			navReg(){
				uni.navigateTo({
					url: 'reg'
				});
			},
			subForm(){
				let that = this;
				
				if (that.mobile===""){
					that.$api.msg("请输入手机号码");
					return;
				}
				if(!util.isMobile(that.mobile)){
					that.$api.msg("请输入正确格式的手机号码");
					return;
				}
				//默认密码登录
				if (that.login_type ==2){
					if (that.vcode===""){
						that.$api.msg("请输入验证码");
						return;
					}
				}else{
					if (that.password===""){
						that.$api.msg("请输入密码");
						return;
					}
					
				}

				
				//确认登录成功
				if (that.remember){
					uni.setStorageSync("rem_mobile", that.mobile);
				}
				
				let url = "/v1/login_pas";
				let data_json = {
					account : that.mobile,
					password : that.password,
				}
				//默认密码登录
				if (that.login_type == 2){
					url = "/v1/login_mobile";
					data_json = {
						mobile : that.mobile,
						scode : that.vcode,
					}
					API_Login.loginByMobile(data_json).then(res=>{
						that.loginCallBack(res);
					})
				}else{
					API_Login.login(data_json).then(res=>{
						that.loginCallBack(res);
					})
				}
			},
			//手机登录之后
			loginCallBack(res){
				let that = this;
				console.log("手机登录返回值",res);
				if (res.data.error_code==0){
					that.$api.msg('登录成功');
					//console.log("token获取",res.data.token);
					//记住登录
					uni.setStorageSync("rem_mobile", that.mobile);
					//设置token
					uni.setStorageSync("token", {access_token:res.data.data.token});
					
					let login_json= {
						account:that.mobile,
						hasLogin:true
					}
					
					
					//设置token
					http.setConfig((config) => { /* 设置全局配置 */
					  return configHandle(config);
					})
					
					that.login(login_json);
					setTimeout(()=>{uni.navigateBack();},500)
				}else{
					that.$api.msg(res.data.msg);
				}
			},
			//微信公众号登录
			wxLogin(){
				wxJsSdk.wxAuthorize((data)=>{
					this.login_data = data;
					console.log("输出登录后", this.login_data);
				});
			},
		
			//微信APP登录
			thirdLogin(loginType="weixin"){
				let that = this;
				
				
				uni.getProvider({
					service:"oauth",
					success(resapp){
						console.log(resapp);
						if (resapp.provider.includes(loginType)){
							uni.showLoading({
								title:"登录中..."
							})
							uni.login({
							  provider: loginType,
							  success: function (loginRes) {
								//console.log("授权信息", loginRes.authResult);
								
								//登录url
								let url = "/v1/login_app";
									
								//提交数据
								let data_json= {
									openid:loginRes.authResult.openid,
									access_token:loginRes.authResult.access_token
								}
									
								that.$api.AJAX({
									method:"POST",
									data: data_json,
									url:config.baseUrl + url,
									success(res){
										console.log("返回值",res);
										if (res.error_code==60001){
											uni.redirectTo({
												url:"../ucenter/mobile_cert"
											});
										}
										else{

											//设置token
											uni.setStorageSync("token",{access_token:res.data.token});
											let login_json= {
												account:that.mobile,
												hasLogin:true
											}
											
											that.login(login_json);
											
											//设置token
											http.setConfig((config) => { /* 设置全局配置 */
											  return configHandle(config);
											})
											
											uni.hideLoading();
											
											setTimeout(()=>{
												uni.navigateBack();
											},500)
										
										}
									}
								})

							  },
							//失败登录
							fail(e){
								uni.hideLoading();
							}
							});

						}else{
							that.$api.msg("暂时没有开通")
						}
					}
				})

			}
		}
	}
</script>

<style scope>
	.cu-form-group{ padding: 0;}
	.cu-form-group .title {
		min-width: calc(1em + 28rpx);
	}
	.login-box{margin-top: 230rpx; border-radius: 36rpx;}
	.login-logo-bar{ margin-top: -160rpx;}
	.login-logo-img {  width: 160rpx; height: 160rpx; border-radius: 40rpx; }
	page{ background: url(https://shop.io.mi-img.com/app/shop/img?id=shop_dfa89d9b977aa2f32346a1e2e3ecb838.png&w=750&h=1334);
    background-size: 100% auto;
    background-repeat: no-repeat;}
	.third-login-bar{}
	.third-login-item{ padding: 5px; width: 60rpx; height: 60rpx;}
	.third-login-item text{ font-size: 60rpx; margin-top:-4rpx; display: inline-block;}
	.login-bot-title{ position: relative; text-align: center;}
	.login-bot-title .title{ display: inline-block; line-height: 28rpx;  font-size: 28rpx; color:#999; background-color: #fff; position: relative;  z-index: 3; padding: 0 20rpx;  }
	.login-bot-title::after{ content: ""; width: 70%; height: 2rpx; transform: scaleY(.5); background-color: #ccc; position: absolute; left:15%; bottom: 14rpx;}
</style>
